<template>
  <div class="collect-page">

    <!-- 
      onLoad方法：
        是用来加载数据的方法
        会在页面打开时自动调用，当它发现数据无法铺满一屏时会自动调用
        当你往上滚，滚到快要到底部，又会调用

      v-model绑定的loading
        是用来标记当前是否正在加载中，
        如果为true代表正在加载中，就不会调用onLoad
        所以默认值应该给false,不然页面一打开一次都不会调用onLoad
        当onLoad被调用，会自动把这个值改成true
        所以加载完数据，记得要写代码把这个值改回false，代表结束本次加载状态，可以进行下次加载

      finished：
        标记完全加载完毕，为false代表还没有，为true全部加载完毕
        所以默认值也应该是false
        如果确保数据全部加载完了，我们也要把它设置为true

     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'collect-page',
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad () {
 
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }

        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.collect-page {
  margin-bottom: 50px;
  margin-top: 44px;
}
</style>
